<table class="tlp-table doc-table-color">
    <thead>
    <tr>
        <th class="doc-color-name">Name</th>
        <th class="doc-color-variable">Variable</th>
        <th>Primary hexa code</th>
        <th>Secondary hexa code</th>
        <th>Border hexa code</th>
        <th>Text hexa code</th>
        <th>Accessibility pattern image</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <span class="doc-color doc-color-inca-silver"></span>
            Inca silver
        </td>
        <td><code class="code-inline">$tlp-swatch-inca-silver[-{variant}]</code></td>
        <td><code class="doc-color-code-inca-silver-primary">#5d5d5d</code></td>
        <td><code class="doc-color-code-inca-silver-secondary">#ededed</code></td>
        <td><code class="doc-color-code-inca-silver-border">#8f8f8f</code></td>
        <td><code class="doc-color-code-inca-silver-text">#525252</code></td>
        <td>
            <div class="doc-color-inca-silver-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-chrome-silver"></span>
            Chrome silver
        </td>
        <td><code class="code-inline">$tlp-swatch-chrome-silver[-{variant}]</code></td>
        <td><code class="doc-color-code-chrome-silver-primary">#8f8f8f</code></td>
        <td><code class="doc-color-code-chrome-silver-secondary">#f4f4f4</code></td>
        <td><code class="doc-color-code-chrome-silver-border">#8f8f8f</code></td>
        <td><code class="doc-color-code-chrome-silver-text">#5f5f5f</code></td>
        <td>
            <div class="doc-color-chrome-silver-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-firemist-silver"></span>
            Firemist silver
        </td>
        <td><code class="code-inline">$tlp-swatch-firemist-silver[-{variant}]</code></td>
        <td><code class="doc-color-code-firemist-silver-primary">#c5c5c5</code></td>
        <td><code class="doc-color-code-firemist-silver-secondary">#fafafa</code></td>
        <td><code class="doc-color-code-firemist-silver-border">#8f8f8f</code></td>
        <td><code class="doc-color-code-firemist-silver-text">#6f6f6f</code></td>
        <td>
            <div class="doc-color-firemist-silver-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-red-wine"></span>
            Red wine
        </td>
        <td><code class="code-inline">$tlp-swatch-red-wine[-{variant}]</code></td>
        <td><code class="doc-color-code-red-wine-primary">#a10202</code></td>
        <td><code class="doc-color-code-red-wine-secondary">#f4dbdb</code></td>
        <td><code class="doc-color-code-red-wine-border">#f02727</code></td>
        <td><code class="doc-color-code-red-wine-text">#842f2f</code></td>
        <td>
            <div class="doc-color-red-wine-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-fiesta-red"></span>
            Fiesta red
        </td>
        <td><code class="code-inline">$tlp-swatch-fiesta-red[-{variant}]</code></td>
        <td><code class="doc-color-code-fiesta-red-primary">#f02727</code></td>
        <td><code class="doc-color-code-fiesta-red-secondary">#ffe5e5</code></td>
        <td><code class="doc-color-code-fiesta-red-border">#f02727</code></td>
        <td><code class="doc-color-code-fiesta-red-text">#b70d0d</code></td>
        <td>
            <div class="doc-color-fiesta-red-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-coral-pink"></span>
            Coral pink
        </td>
        <td><code class="code-inline">$tlp-swatch-coral-pink[-{variant}]</code></td>
        <td><code class="doc-color-code-coral-pink-primary">#ff8a8a</code></td>
        <td><code class="doc-color-code-coral-pink-secondary">#fff2f2</code></td>
        <td><code class="doc-color-code-coral-pink-border">#f02727</code></td>
        <td><code class="doc-color-code-coral-pink-text">#bf4747</code></td>
        <td>
            <div class="doc-color-coral-pink-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-teddy-brown"></span>
            Teddy brown
        </td>
        <td><code class="code-inline">$tlp-swatch-teddy-brown[-{variant}]</code></td>
        <td><code class="doc-color-code-teddy-brown-primary">#9a600d</code></td>
        <td><code class="doc-color-code-teddy-brown-secondary">#f8eccc</code></td>
        <td><code class="doc-color-code-teddy-brown-border">#f18e06</code></td>
        <td><code class="doc-color-code-teddy-brown-text">#774a0a</code></td>
        <td>
            <div class="doc-color-teddy-brown-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-clockwork-orange"></span>
            Clockwork orange
        </td>
        <td><code class="code-inline">$tlp-swatch-clockwork-orange[-{variant}]</code></td>
        <td><code class="doc-color-code-clockwork-orange-primary">#f18e06</code></td>
        <td><code class="doc-color-code-clockwork-orange-secondary">#fff5db</code></td>
        <td><code class="doc-color-code-clockwork-orange-border">#f18e06</code></td>
        <td><code class="doc-color-code-clockwork-orange-text">#945600</code></td>
        <td>
            <div class="doc-color-clockwork-orange-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-graffiti-yellow"></span>
            Graffiti yellow
        </td>
        <td><code class="code-inline">$tlp-swatch-graffiti-yellow[-{variant}]</code></td>
        <td><code class="doc-color-code-graffiti-yellow-primary">#ffd300</code></td>
        <td><code class="doc-color-code-graffiti-yellow-secondary">#fffbe7</code></td>
        <td><code class="doc-color-code-graffiti-yellow-border">#f18e06</code></td>
        <td><code class="doc-color-code-graffiti-yellow-text">#8a6c00</code></td>
        <td>
            <div class="doc-color-graffiti-yellow-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-army-green"></span>
            Army green
        </td>
        <td><code class="code-inline">$tlp-swatch-army-green[-{variant}]</code></td>
        <td><code class="doc-color-code-army-green-primary">#5f8347</code></td>
        <td><code class="doc-color-code-army-green-secondary">#edf3db</code></td>
        <td><code class="doc-color-code-army-green-border">#6abf1d</code></td>
        <td><code class="doc-color-code-army-green-text">#385f1e</code></td>
        <td>
            <div class="doc-color-army-green-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-neon-green"></span>
            Neon green
        </td>
        <td><code class="code-inline">$tlp-swatch-neon-green[-{variant}]</code></td>
        <td><code class="doc-color-code-neon-green-primary">#6abf1d</code></td>
        <td><code class="doc-color-code-neon-green-secondary">#f4f8e9</code></td>
        <td><code class="doc-color-code-neon-green-border">#6abf1d</code></td>
        <td><code class="doc-color-code-neon-green-text">#137900</code></td>
        <td>
            <div class="doc-color-neon-green-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-acid-green"></span>
            Acid green
        </td>
        <td><code class="code-inline">$tlp-swatch-acid-green[-{variant}]</code></td>
        <td><code class="doc-color-code-acid-green-primary">#b9e45d</code></td>
        <td><code class="doc-color-code-acid-green-secondary">#f8fbf3</code></td>
        <td><code class="doc-color-code-acid-green-border">#6abf1d</code></td>
        <td><code class="doc-color-code-acid-green-text">#567d00</code></td>
        <td>
            <div class="doc-color-acid-green-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-sherwood-green"></span>
            Sherwood green
        </td>
        <td><code class="code-inline">$tlp-swatch-sherwood-green[-{variant}]</code></td>
        <td><code class="doc-color-code-sherwood-green-primary">#009465</code></td>
        <td><code class="doc-color-code-sherwood-green-secondary">#e3f6f0</code></td>
        <td><code class="doc-color-code-sherwood-green-border">#28c4a0</code></td>
        <td><code class="doc-color-code-sherwood-green-text">#006545</code></td>
        <td>
            <div class="doc-color-sherwood-green-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-ocean-turquoise"></span>
            Ocean turquoise
        </td>
        <td><code class="code-inline">$tlp-swatch-ocean-turquoise[-{variant}]</code></td>
        <td><code class="doc-color-code-ocean-turquoise-primary">#28c4a0</code></td>
        <td><code class="doc-color-code-ocean-turquoise-secondary">#ecfaf6</code></td>
        <td><code class="doc-color-code-ocean-turquoise-border">#28c4a0</code></td>
        <td><code class="doc-color-code-ocean-turquoise-text">#00775c</code></td>
        <td>
            <div class="doc-color-ocean-turquoise-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-surf-green"></span>
            Surf green
        </td>
        <td><code class="code-inline">$tlp-swatch-surf-green[-{variant}]</code></td>
        <td><code class="doc-color-code-surf-green-primary">#75e4bf</code></td>
        <td><code class="doc-color-code-surf-green-secondary">#f5fffc</code></td>
        <td><code class="doc-color-code-surf-green-border">#28c4a0</code></td>
        <td><code class="doc-color-code-surf-green-text">#1b805e</code></td>
        <td>
            <div class="doc-color-surf-green-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-deep-blue"></span>
            Deep blue
        </td>
        <td><code class="code-inline">$tlp-swatch-deep-blue[-{variant}]</code></td>
        <td><code class="doc-color-code-deep-blue-primary">#0480bf</code></td>
        <td><code class="doc-color-code-deep-blue-secondary">#e1f2fa</code></td>
        <td><code class="doc-color-code-deep-blue-border">#1ebade</code></td>
        <td><code class="doc-color-code-deep-blue-text">#005f90</code></td>
        <td>
            <div class="doc-color-deep-blue-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-lake-placid-blue"></span>
            Lake placid blue
        </td>
        <td><code class="code-inline">$tlp-swatch-lake-placid-blue[-{variant}]</code></td>
        <td><code class="doc-color-code-lake-placid-blue-primary">#1ebade</code></td>
        <td><code class="doc-color-code-lake-placid-blue-secondary">#eef7fb</code></td>
        <td><code class="doc-color-code-lake-placid-blue-border">#1ebade</code></td>
        <td><code class="doc-color-code-lake-placid-blue-text">#007792</code></td>
        <td>
            <div class="doc-color-lake-placid-blue-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-daphne-blue"></span>
            Daphne blue
        </td>
        <td><code class="code-inline">$tlp-swatch-daphne-blue[-{variant}]</code></td>
        <td><code class="doc-color-code-daphne-blue-primary">#87dbef</code></td>
        <td><code class="doc-color-code-daphne-blue-secondary">#f4fcff</code></td>
        <td><code class="doc-color-code-daphne-blue-border">#1ebade</code></td>
        <td><code class="doc-color-code-daphne-blue-text">#007a96</code></td>
        <td>
            <div class="doc-color-daphne-blue-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-plum-crazy"></span>
            Plum crazy
        </td>
        <td><code class="code-inline">$tlp-swatch-plum-crazy[-{variant}]</code></td>
        <td><code class="doc-color-code-plum-crazy-primary">#7c2db3</code></td>
        <td><code class="doc-color-code-plum-crazy-secondary">#f1e9f8</code></td>
        <td><code class="doc-color-code-plum-crazy-border">#a44ee1</code></td>
        <td><code class="doc-color-code-plum-crazy-text">#6a14a7</code></td>
        <td>
            <div class="doc-color-plum-crazy-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-ultra-violet"></span>
            Ultra violet
        </td>
        <td><code class="code-inline">$tlp-swatch-ultra-violet[-{variant}]</code></td>
        <td><code class="doc-color-code-ultra-violet-primary">#a44ee1</code></td>
        <td><code class="doc-color-code-ultra-violet-secondary">#f6f3f9</code></td>
        <td><code class="doc-color-code-ultra-violet-border">#a44ee1</code></td>
        <td><code class="doc-color-code-ultra-violet-text">#8b21d6</code></td>
        <td>
            <div class="doc-color-ultra-violet-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-lilac-purple"></span>
            Lilac purple
        </td>
        <td><code class="code-inline">$tlp-swatch-lilac-purple[-{variant}]</code></td>
        <td><code class="doc-color-code-lilac-purple-primary">#ce91fa</code></td>
        <td><code class="doc-color-code-lilac-purple-secondary">#faf7fd</code></td>
        <td><code class="doc-color-code-lilac-purple-border">#a44ee1</code></td>
        <td><code class="doc-color-code-lilac-purple-text">#8e4cbd</code></td>
        <td>
            <div class="doc-color-lilac-purple-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-panther-pink"></span>
            Panther pink
        </td>
        <td><code class="code-inline">$tlp-swatch-panther-pink[-{variant}]</code></td>
        <td><code class="doc-color-code-panther-pink-primary">#c42887</code></td>
        <td><code class="doc-color-code-panther-pink-secondary">#feeaf1</code></td>
        <td><code class="doc-color-code-panther-pink-border">#e560b2</code></td>
        <td><code class="doc-color-code-panther-pink-text">#9a1d69</code></td>
        <td>
            <div class="doc-color-panther-pink-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-peggy-pink"></span>
            Peggy pink
        </td>
        <td><code class="code-inline">$tlp-swatch-peggy-pink[-{variant}]</code></td>
        <td><code class="doc-color-code-peggy-pink-primary">#e560b2</code></td>
        <td><code class="doc-color-code-peggy-pink-secondary">#fff1f6</code></td>
        <td><code class="doc-color-code-peggy-pink-border">#e560b2</code></td>
        <td><code class="doc-color-code-peggy-pink-text">#c5007a</code></td>
        <td>
            <div class="doc-color-peggy-pink-pattern"></div>
        </td>
    </tr>
    <tr>
        <td>
            <span class="doc-color doc-color-flamingo-pink"></span>
            Flamingo pink
        </td>
        <td><code class="code-inline">$tlp-swatch-flamingo-pink[-{variant}]</code></td>
        <td><code class="doc-color-code-flamingo-pink-primary">#edacd4</code></td>
        <td><code class="doc-color-code-flamingo-pink-secondary">#fff7fa</code></td>
        <td><code class="doc-color-code-flamingo-pink-border">#e560b2</code></td>
        <td><code class="doc-color-code-flamingo-pink-text">#b7438a</code></td>
        <td>
            <div class="doc-color-flamingo-pink-pattern"></div>
        </td>
    </tr>
    </tbody>
</table>
